<template>
  <div class="app-container">

    <el-row :gutter="10">
      <el-col :span="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>日统计</span>
          </div>
            <div style="text-align: center;">
                请选择月:
                <el-date-picker
                v-model="ym"
                type="month"
                placeholder="选择月"
                :clearable="false"
                :editable="false"
                format="yyyy-MM"
                value-format="yyyy-MM"
                @change="handleMonthChange">
              </el-date-picker>
            </div>
          <div id="mutipeBar00" style="margin-top: 55px"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10" style="margin-top: 15px">
      <el-col :span="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>月统计</span>
          </div>
          <div style="text-align: center;">
            请选择年:
            <el-date-picker
              v-model="ye"
              type="year"
              placeholder="选择年"
              :clearable="false"
              :editable="false"
              @change="handleYearChange">
            </el-date-picker>
          </div>
          <div id="mutipeBar01"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="10" style="margin-top: 15px">
      <el-col :span="24">
        <el-card >
          <div slot="header" class="clearfix">
            <span>年统计</span>
          </div>
          <div id="mutipeBar02"></div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {initBb} from "@/api/kws/bbday";
import * as echarts from 'echarts';

export default {
  name: "Bbday",
  data() {
    return {
      // 遮罩层
      loading: true,
      subtext: '趋势数据',
      ym: new Date().getFullYear() + '-' + (new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1)),
      ye: new Date().getFullYear()+ '',
      mutipeBar00Chart: null,
      mutipeBar01Chart:null,
      mutipeBar02Chart:null
    };
  },

  mounted(){
    this.initChart();
  },
  methods: {

    //初始化chart
    initChart(){
      //--------------------------第一行-----------------------
      let mutipeBar00tDom = document.getElementById('mutipeBar00');
      this.mutipeBar00Chart = echarts.init(mutipeBar00tDom);
      let option00;
      let app00 = {};
      const posList00 = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ];
      app00.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList00.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app00.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labeloption00 = {
            rotate: app00.config.rotate,
            align: app00.config.align,
            verticalAlign: app00.config.verticalAlign,
            position: app00.config.position,
            distance: app00.config.distance
          };
          this.mutipeBar00Chart.setOption({
            series: [
              {
                label: labeloption00
              },
              {
                label: labeloption00
              },
              {
                label: labeloption00
              },
              {
                label: labeloption00
              }
            ]
          });
        }
      };
      const labeloption00 = {
        show: true,
        position: app00.config.position,
        distance: app00.config.distance,
        align: app00.config.align,
        verticalAlign: app00.config.verticalAlign,
        rotate: app00.config.rotate,
        formatter: '{name|{a}} {c}',
        fontSize: 16,
        rich: {
          name: {}
        }
      };
      option00 = {
        title: {
          text: this.ym + '月统计图',
          subtext: '趋势图',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['综合营收', '门票', '停车场', '二消','游客量'],
          top: 480
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '金额(元)\n\n人数(个)',
          }
        ],
        series: [
          {
            name: '综合营收',
            type: 'bar',
            // barWidth: 25,
            barGap: 0,
            // label: labeloption00,
            emphasis: {
              focus: 'series'
            },
            data: [1000, 800, 900]
          },
          {
            name: '门票',
            type: 'bar',
            // barWidth: 25,
            // label: labeloption00,
            emphasis: {
              focus: 'series'
            },
            data: [500, 400, 500]
          },
          {
            name: '停车场',
            type: 'bar',
            // barWidth: 25,
            // label: labeloption00,
            emphasis: {
              focus: 'series'
            },
            data: [300, 200, 200]
          },
          {
            name: '二消',
            type: 'bar',
            // barWidth: 25,
            // label: labeloption00,
            emphasis: {
              focus: 'series'
            },
            data: [200, 200, 200]
          },
          {
            name: '游客量',
            type: 'line',
            // barWidth: 25,
            label: labelOption02,
            emphasis: {
              focus: 'series'
            },
            data: [200, 200, 200]
          }
        ]
      };

      //--------------------------第二行-----------------------
      //TODO mutipeBar01
      let mutipeBar01tDom = document.getElementById('mutipeBar01');
      this.mutipeBar01Chart = echarts.init(mutipeBar01tDom);
      let option01;
      let app01 = {};
      const posList01 = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ];
      app01.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList01.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app01.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption01 = {
            rotate: app01.config.rotate,
            align: app01.config.align,
            verticalAlign: app01.config.verticalAlign,
            position: app01.config.position,
            distance: app01.config.distance
          };
          this.mutipeBar01Chart.setOption({
            series: [
              {
                label: labelOption01
              },
              {
                label: labelOption01
              },
              {
                label: labelOption01
              },
              {
                label: labelOption01
              }
            ]
          });
        }
      };
      const labelOption01 = {
        show: true,
        position: app01.config.position,
        distance: app01.config.distance,
        align: app01.config.align,
        verticalAlign: app01.config.verticalAlign,
        rotate: app01.config.rotate,
        formatter: '{name|{a}} {c}',
        fontSize: 16,
        rich: {
          name: {}
        }
      };
      option01 = {
        title: {
          text: this.ye + '年统计图',
          subtext: '趋势图',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['综合营收', '门票', '停车场', '二消','游客量'],
          top: 460
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '金额(元)\n\n人数(个)',
          }
        ],
        series: [
          {
            name: '综合营收',
            type: 'bar',
            barWidth: 25,
            barGap: 0,
            // label: labelOption01,
            emphasis: {
              focus: 'series'
            },
            data: [1000, 800, 900]
          },
          {
            name: '门票',
            type: 'bar',
            barWidth: 25,
            // label: labelOption01,
            emphasis: {
              focus: 'series'
            },
            data: [500, 400, 500]
          },
          {
            name: '停车场',
            type: 'bar',
            barWidth: 25,
            // label: labelOption01,
            emphasis: {
              focus: 'series'
            },
            data: [300, 200, 200]
          },
          {
            name: '二消',
            type: 'bar',
            barWidth: 25,
            // label: labelOption01,
            emphasis: {
              focus: 'series'
            },
            data: [200, 200, 200]
          },
          {
            name: '游客量',
            type: 'line',
            barWidth: 25,
            label: labelOption02,
            emphasis: {
              focus: 'series'
            },
            data: [200, 200, 200]
          }
        ]
      };
      // mutipeBar01Chart.setOption(option01);

      //TODO mutipeBar02
      let mutipeBar02tDom = document.getElementById('mutipeBar02');
      this.mutipeBar02Chart = echarts.init(mutipeBar02tDom);
      let option02;
      let app02 = {};
      const posList02 = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ];
      app02.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList02.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app02.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption02 = {
            rotate: app02.config.rotate,
            align: app02.config.align,
            verticalAlign: app02.config.verticalAlign,
            position: app02.config.position,
            distance: app02.config.distance
          };
          this.mutipeBar02Chart.setOption({
            series: [
              {
                label: labelOption02
              },
              {
                label: labelOption02
              },
              {
                label: labelOption02
              },
              {
                label: labelOption02
              }
            ]
          });
        }
      };
      const labelOption02 = {
        show: true,
        position: app02.config.position,
        distance: app02.config.distance,
        align: app02.config.align,
        verticalAlign: app02.config.verticalAlign,
        rotate: app02.config.rotate,
        formatter: '{name|{a}} {c}',
        fontSize: 16,
        rich: {
          name: {}
        }
      };
      option02 = {
        title: {
          text: '近几年统计图',
          subtext: '趋势图',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['综合营收', '门票', '停车场', '二消','游客量'],
          top: 460
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar', 'stack'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['2023年', '2024年', '2025年']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '金额(元)\n\n人数(个)',
          }
        ],
        series: [
          {
            name: '综合营收',
            type: 'bar',
            barWidth: 25,
            barGap: 0,
            // label: labelOption02,
            emphasis: {
              focus: 'series'
            },
            data: [1000, 800, 900]
          },
          {
            name: '门票',
            type: 'bar',
            barWidth: 25,
            // label: labelOption02,
            emphasis: {
              focus: 'series'
            },
            data: [500, 400, 500]
          },
          {
            name: '停车场',
            type: 'bar',
            barWidth: 25,
            // label: labelOption02,
            emphasis: {
              focus: 'series'
            },
            data: [300, 200, 200]
          },
          {
            name: '二消',
            type: 'bar',
            barWidth: 25,
            // label: labelOption02,
            emphasis: {
              focus: 'series'
            },
            data: [200, 200, 200]
          },
          {
            name: '游客量',
            type: 'line',
            barWidth: 25,
            // label: labelOption02,
            emphasis: {
              focus: 'series'
            },
            data: [200, 200, 200]
          }
        ]
      };
      // this.mutipeBar02Chart.setOption(option02);

      // 构造要发送到后台的数据
      const querData = {
        id: 1,
        ym: this.ym,
        year: this.ye
      };
      /** 页面初始化数据 */
      initBb(querData).then(response => {
        this.loading = true;
        //第一行
        option00.xAxis[0].data=response.data.bar01s_x;
        option00.series[0].data=response.data.bar01s_0;
        option00.series[1].data=response.data.bar01s_1;
        option00.series[2].data=response.data.bar01s_2;
        option00.series[3].data=response.data.bar01s_3;
        option00.series[4].data=response.data.bar01s_4;
        //设置option
        this.mutipeBar00Chart.setOption(option00);

        //第二行
        option01.series[0].data=response.data.mutipeBar01_0;
        option01.series[1].data=response.data.mutipeBar01_1;
        option01.series[2].data=response.data.mutipeBar01_2;
        option01.series[3].data=response.data.mutipeBar01_3;
        option01.series[4].data=response.data.mutipeBar01_4;

        this.mutipeBar01Chart.setOption(option01);
        //第二行

        option02.xAxis[0].data=response.data.mutipeBar02_x;
        option02.series[0].data=response.data.mutipeBar02_0;
        option02.series[1].data=response.data.mutipeBar02_1;
        option02.series[2].data=response.data.mutipeBar02_2;
        option02.series[3].data=response.data.mutipeBar02_3;
        option02.series[4].data=response.data.mutipeBar02_4;

        this.mutipeBar02Chart.setOption(option02);

        this.loading = false;
      });
    },
    //日期改变，重新加载页面
    handleMonthChange(ym){
      this.ym = ym;
      if (this.mutipeBar00Chart) {
        this.mutipeBar00Chart.dispose(); // 销毁现有的图表实例
      }

      this.initChart(); // 重新初始化图表
    },

    //日期改变，重新加载页面
    handleYearChange(ye){
      this.ye = ye.getFullYear()+'';
      if (this.mutipeBar01Chart) {
        this.mutipeBar01Chart.dispose(); // 销毁现有的图表实例
      }

      this.initChart(); // 重新初始化图表
    },

  }
};
</script>
<style>
#mutipeBar00, #mutipeBar01, #mutipeBar02 {
  margin-top: 70px;
  width: 100%;
  height: 500px;
  transform: translateY(-40px);
}
</style>
